// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
//引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About,
    },
    {
      path: '/home',
      component: Home,
      // 多级路由的使用  使用children进行配置    子路由的path不要加/
      // 跳转的时候要带上父路径
      children: [
        {
          path: 'news',
          component: News,
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              name: 'xiangqing',
              path: 'detail/:id/:title', //使用params给路由组件传递参数要使用占位符
              component: Detail,
              //props第一种写法，props值为布尔值，表示把接收到的params参数通过props传递给Detail路由组件
              // 此种写法只能用与params传递参数
              // props: true,

              // props第二种写法,props值为函数  返回一个对象，表示将诶收到的参数通过props传递给Detail路由组件
              // 此种写法params和query传递参数都可以用
              props(route) {
                return { id: route.params.id, title: route.params.title };
              },
            },
          ],
        },
      ],
    },
  ],
});
